<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>服务工程师库存列表App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/dist/css/oa-app.css">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style type="text/css">
        .tableHead {
            border-top: hidden;
        }

        .searchBox {
            display: flex;
            height: 50px;
            position: fixed;
            top: 0px;
            width: 100%;
            background: #fff;
        }

    </style>
</head>
<body>
<div id="app" v-cloak style="padding-bottom: 25px;">
    <!-- <div class="oa-tab">
         <div class="oa-tab-left"></div>
         <div class="oa-tab-middle">
             <span :class="selectIndex==0? 'tabActive':'tabNo'" @click="changeIndex(0);"
                   style="width: 25%">新机</span>
             <span :class="selectIndex==1? 'tabActive':'tabNo'" @click="changeIndex(1);"
                   style="width: 25%">旧机</span>
             <span :class="selectIndex==2? 'tabActive':'tabNo'" @click="changeIndex(2);"
                   style="width: 25%">旧车</span>
             <span :class="selectIndex==3? 'tabActive':'tabNo'" @click="changeIndex(3);"
                   style="width: 25%">旧房</span>
         </div>
         <div class="oa-tab-right"></div>
     </div>-->
    <div class="searchBox">
        <input type="text" placeholder="关键字" v-model="searchParams.key"
               style="margin-top: 10px;flex: 1;height:30px;outline: none;margin-left: 6px;" id="txtParent">
        <button type="button" @click="changeIndex(true);"
                style="margin-top: 10px;margin-left: 5px;float: left;margin-right: 5px;height: 30px;">查询
        </button>
    </div>
    <!--新机-->
    <table class="oa-table " style="position: fixed;top:50px;">
        <thead>
        <tr>
            <th style="width:65px">型号</th>
            <th>序列号</th>
            <th style="width:65px">库存状态</th>
            <th style="width:85px">审核状态</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table tableHead" style="margin-top:76px;">
        <tbody>
        <tr class="oa-lineOne-H" v-for="(item,i) in newMachines" v-if="item.newCompanyId==companyId||item.moveNewCompanyId==companyId">
            <td style="width:65px;text-align: left;" class="oa-lineOne" @click.stop="showMore($event.target)">
                {{item.modelName}}
            </td>
            <td class="oa-lineOne" style="text-align: left;"><a class="oaColor" href="javascript:void(0);"
                                                                @click="goDetail(item);">{{item.sequence}}</a>
            </td>
            <td style="width:65px;" class="oa-lineOne" v-html="convertAuditFlagToName(item.state)"></td>
            <td style="width:85px;" class="oa-lineOne">
                <template v-if="item.auditFlag==0"><span style="color:red">待-{{item.auditName}}-审核</span></template>
                <template v-else-if="item.auditFlag==-1">-</template>
                <template v-else-if="item.auditFlag==1">已通过</template>
                <template v-else>已驳回</template>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            companyId:'',
            isBottomLine: false,
            isLoad: false,
            newMachines: [],
            partTime:'',
            searchParams: {
                auditFlag: 1,
                haveDelivery: 1,
                haveSettle: 0,
                userId: getUrlParamObj().userId,
                customerKeyId: '',
                createUserId: '',
                customerKey: '',
                createUserName: '',
                key: "",
                requestPage: 1,
                pageSize: 40,
                type: ''
            },
        },
        methods: {
            convertAuditFlagToName: function (state) {
                switch (state) {
                    case "已交":
                        return "<span style='color:red;'>" + state + "</span>";
                        break;
                    case "库存":
                        return "<span style='color:white;background-color:#8c8c8c'>" + state + "</span>";
                        break;
                    default :
                        return "<span>" + state + "</span>";
                        break;
                }
            },
            changeIndex: function (isSearch) {
                document.documentElement.scrollTop = document.body.scrollTop = 0;
                var that = this;
                that.newMachines = [];
                that.searchParams.key = isSearch ? that.searchParams.key : '';
                that.searchParams.requestPage = 1;
                that.isBottomLine = false;
                that.isLoad = false;
                that.getList(false);
            },
            setPullRefresh: function (isOpen) {
                var param = {
                    pullRefresh: isOpen, //是否开启原生下拉刷新
                }
                JSBridge.call(UI, 'setPullRefresh', param)
            },
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if (mydiv.offsetParent === null) {
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                        mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop + el.getBoundingClientRect().top + el.offsetHeight + "px")
                    } else {
                        mydiv.style.display = 'none';
                    }

                } else {
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            },
            fjStyle: function (fjName) {
                //传入附件名称 返回对应附件类型的样式用于展示
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            },
            getList: function (pushFlag) {
                var that = this;
                if (that.isBottomLine) {
                    that.showToast("没有更多数据了!");
                    return;
                }
                if (that.isLoad) {
                    return;
                } else {
                    that.isLoad = true;
                }
                var url = '/deviceSampleNew/getDeviceSampleList.json';
                that.showLoading();
                axios({
                    url: url,
                    method: 'post',
                    data: that.searchParams,
                }).then(function (response) {
                    if (pushFlag) {
                        that.newMachines = that.newMachines.concat(response.records);
                    } else {
                        that.newMachines = response.records;
                    }
                    that.searchParams.requestPage = that.searchParams.requestPage + 1;
                    if (that.searchParams.requestPage > response.pager.pageCount) {
                        that.isBottomLine = true;
                    }
                    that.isLoad = false;
                    that.hideLoading();
                }).catch(function (error) {
                    that.isLoad = false;
                    that.hideLoading();
                })
            },
            showLoading: function () {
                var that = this
                var param = {
                    cancelable: false
                }
                JSBridge.call(UI, 'showLoading', param)
            },
            hideLoading: function () {
                JSBridge.call(UI, 'hideLoading')
            },
            showToast: function (title) {
                var param = {
                    title: title
                }
                JSBridge.call(UI, 'showToast', param)
            },
            goDetail: function (item) {
                var that = this;
                var url = '/page/device-new/ServiceApp/newMachineDetailApp.html';
                var type = 'edit';
                if((item.fkcompanyId!=item.newCompanyId)&&that.partTime.indexOf(item.fkcompanyId)>=0){
                    type='look';
                }
                /*移库在途中，原公司不能操作，新公司能够操作*/
                if(item.state=='移库在途'&& item.auditFlag==1 && that.companyId != item.moveNewCompanyId){
                    type='look';
                }
                if((item.state=='移库在途' && (that.partTime.indexOf('服务工程师' + item.moveNewCompanyId)>=0 || that.partTime.indexOf('服务工程师' + "201712161613432EAF27DBCCB7D0E6CA")>=0))){
                    type= (
                            /*服务工程师接车*/
                        (
                                /*草稿，审核通过*/
                            (item.auditFlag =='-1'||item.auditFlag=='1') &&
                            /*在途过程*/
                            (item.state=='提车在途'||item.state=='退货在途'||item.state=='移库在途')
                        )
                        ||
                        /*接完车后要审核*/
                        (
                                /*库存，寄存*/
                            (item.state=='库存'||item.state=='寄存') &&
                            /*草稿、已驳回*/
                            (item.auditFlag=='-1'||item.auditFlag=='2')
                        )
                    )?'edit':'look';

                }
                var param = {
                    screenType: '0',        //默认竖屏0, 横屏1
                    url: url + '?id=' + item.id + "&userId=" + getUrlParamObj().userId + "&pageType=" + type,
                    showTitleBar: false,     //是否显示标题栏
                    enableRefresh: false,   //是否启用下拉刷新
                }
                JSBridge.call(ROUTER, 'navigateTo', param)
            }
        },
        mounted: function () {

            var that = this;
            that.getList(false);
            that.setPullRefresh(true);
            axios({
                url: '/user/getUserViewById.json',
                method: 'post',
                data: {
                    id: getUrlParamObj().userId
                },
            }).then(function (response) {
                that.companyId = response.companyId;
            }).catch(function (error) {
                console.log(error);
            });
        }
    });
    window.onscroll = function () {
        var isTop = true
        /*清除，提示框信息*/
        var mydiv = document.getElementById("oa-more");
        if (mydiv != null) {
            mydiv.style.display = 'none';
        }
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        //滚动条到底部的条件
        var sum = Math.ceil(scrollTop + windowHeight);
        if (sum >= scrollHeight) {
            //写后台加载数据的函数
            app.getList(true);
        }
        //为了保证兼容性，这里取两个值，哪个有值取哪一个,scrollTop就是触发滚轮事件时滚轮的高度
        if (scrollTop === 0) {
            isTop = true
            setScrollTop(true) //到达顶部
        } else if (scrollTop > 0 && isTop) {
            isTop = false
            setScrollTop(false) //非顶部
        }
    }
</script>
<script>

    function setScrollTop(isScrollTop) {
        var param = {
            isScrollTop: isScrollTop
        }
        JSBridge.call(UI, 'setScrollTop', param)
    }
</script>
</body>
</html>